<template>
	<view class="search">
		<uni-search-bar class="uni-mt-5" suffixIcon="search" v-model="value" placeholder="搜索内容"
			@confirm="searchHistory"></uni-search-bar>
	</view>
	<view class="scroll">
		<swiper :indicator-dots="true" :autoplay="true" class="swiper" circular="true">
			<swiper-item v-for="(item,index) in titles" style="width: 100%;border-radius: 8px;height: auto;"
				:key="index">
				<image :src='item.url' :alt="item.name" class="image" mode="widthFix"></image>
			</swiper-item>
		</swiper>
	</view>
	<view class="pic">
		<uni-card class="card" @click="upload">
			<view class="scan">
				<image src="../../static/拍照识别.png" class="icon" mode="widthFix"></image>
			</view>
			<view class="text">
				拍照或上传照片
			</view>
		</uni-card>
	</view>
	<view class="mid-title">
		<p class="text">
			交通标志图鉴
		</p>
	</view>
	<view class="sing">
		<uni-card class="card1" @click="tosign">
			<view class="img-t">
				<image class="img" src="../../static/scroll/信号灯.png" mode="widthFix"></image>
			</view>
			<view class="text">
				点击查看<br />
				交通信号图鉴
			</view>
		</uni-card>
	</view>
	<view class="mid-title">
		<p class="text">
			浏览历史
		</p>
	</view>
	<view class="history">
		<uni-card class="card_i" :title='history.username' :extra="history.time" note="Tips">
			<view class="text">
				<view>
					识别结果:<span style="font-size: 25px;color:#66b0fc;font-weight: bold;">{{history.ans}}</span>
				</view>
			</view>
			<view class="card_img">
				<image :src="base64ToBlobUrl(history.img)" class="card_img" mode="widthFix"></image>
			</view>
		</uni-card>
	</view>

</template>

<script>
	export default {
		onShow() {
			this.get_history()
		},
		data() {
			return {
				titles: [{
					name: 'img',
					url: '../../static/scroll/标题.jpg'
				}, {
					name: 'img1',
					url: '../../static/scroll/交通安全.png'
				}, {
					name: 'img1',
					url: '../../static/scroll/遵守交规.jpg'
				}],
				history: {},
				value: ""
			}
		},
		methods: {
			tosign() {
				uni.navigateTo({
					url: "../sign/sign"
				})
			},
			choic_img() {
				//上传文件逻辑
				uni.chooseImage({
					//最大照片数
					count: 1,
					//源文件
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'], //这要注意，camera掉拍照，album是打开手机相册
					success: async (res) => {
						const imgurl = res.tempFilePaths[0]
						await uni.uploadFile({
							url: 'http://localhost:8000/sign/recognize', //服务器地址
							fileType: "image", //ZFB必填,不然报错
							filePath: res.tempFilePaths[0], //这个就是我们上面拍照返回或者先中照片返回的数组
							name: 'image',
							formData: {
								'token': uni.getStorageSync('token')
							},
							success: (response) => {
								//此处存在bug，后续连接前后端之后来继续改
								// bug主要问题是后端返回JSON被识别成立String,或许换后端语言解决(
								// 后期换python继续测试,最终版本是python)
								console.log(response)
								let ans = {
									img: imgurl,
									ans: response.data
								}
								uni.setStorageSync('ans', ans)
								uni.navigateTo({
									url: "../recong/recong"
								})

							}
						});
					}
				});
			},
			get_history() {
				uni.request({
					url: "http://localhost:8000/sign/identify/users",
					method: 'GET',
					data: {
						token: uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code === 200) {
							this.history = res.data.history.pop()
						}
					}
				})
			},
			base64ToBlobUrl(base64String, mimeType = "application/octet-stream") {
				// 将 Base64 字符串解码为二进制数据
				const binaryData = Uint8Array.from(atob(base64String), c => c.charCodeAt(0));

				// 创建 Blob 对象
				const blob = new Blob([binaryData], {
					type: mimeType
				});

				// 通过 URL.createObjectURL 创建 Blob 的 URL
				const blobUrl = URL.createObjectURL(blob);

				return blobUrl;
			},
			upload() {
				//封装成为函数方便后续对其进行控制
				this.choic_img()
			},
			searchHistory() {
				uni.setStorageSync('param', this.value)
				uni.navigateTo({
					url: '../../pages/history/history'
				})
			}
		}
	}
</script>

<style lang="scss">
	.search {
		width: 93%;
		height: 50px;
		margin: 0 auto;
		margin-bottom: 20px;
		background-color: #fff;

	}

	.uni-mt-5 {
		width: 98%;
		height: 100%;
		margin-left: -10px;
		// background-color: #fff;
	}

	.scroll {
		width: 93%;
		height: 200px;
		margin: 0 auto;
		border-radius: 10px;

		.swiper {
			width: 100%;
			height: 100%;
			border-radius: 8px;

			.image {
				width: 100%;
				height: 100%;
				border-radius: 8px;
			}
		}
	}

	.pic {
		width: 100%;
		margin: 0 auto;
		height: 100px;
		border-radius: 10px;

		.card {

			.scan {
				width: 60px;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.icon {
					width: 60px;
					height: 60px;
				}
			}

			.text {
				width: 140px;
				height: 60px;
				font-size: 18px;
				line-height: 60px;
				margin-left: 40px;
				color: #66b0fc;
			}
		}
	}

	.mid-title {
		width: 90%;
		height: 40px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* 		border-radius: 0px; */
		border-left: solid 3px #66b0fc;
		background-color: #fff;

		.text {
			margin-left: 10px;
			font-weight: bold;
		}
	}

	.sing {
		width: 100%;

		.card1 {

			.img-t {
				width: 150px;
				height: 150px;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-size: 18px;
				margin-bottom: 20px;
				margin-left: 20px;
				font-weight: 600;
			}
		}
	}

	.text {
		width: 200x;
		font-size: 13px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}


	.card_img {
		width: 80px;
		height: 80px;
	}

	.pop-up {
		padding: 10px;
		margin-bottom: 10px;


		.pop-pic {
			width: 90%;
			margin-left: 5%;

			border-radius: 12px;
			border: #0c34ba 1px solid;

		}
	}

	.pop-down {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-bottom: 20%;

		.pop-txt {
			font-size: 20px;
			color: #8f8b8b;
			margin-left: 10%;
		}

		.pop-txt-ans {
			color: #0c34ba;
			margin-top: 5%;
			text-align: center;
			font-family: 黑体;
			font-size: 30px;
			font-weight: bold;
		}

	}

	.pop-bot {
		display: flex;
		justify-content: space-between;
		padding: 10px;
		height: 40px;
		margin-bottom: 20%;

		.but-1 {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 48%;
			color: #fff;
			text-align: center;
			border-radius: 8px;
			background-color: #343331;
		}

		.but-2 {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 48%;
			color: #fff;
			text-align: center;
			border-radius: 8px;
			background-color: #0c34ba;
		}
	}

	::v-deep .uni-card__content {
		display: flex;
	}

	::v-deep .uni-card__content {
		display: flex;
		justify-content: space-between;
	}

	::v-deep .uni-easyinput__content {
		height: 50px;
	}
</style>